<template>
  <div class="login">
    <goBack title="用户登陆"></goBack>
    <img class="login-logo" :src="loginLogin" />
    <div class="title">欢迎登陆高帮帮</div>
    <div class="subtitle">未注册过的手机号将自动创建账号</div>
    <div class="form">
      <div class="form-phone">
        <input class="input-val" v-model="phone" placeholder="请输入手机号码" />
      </div>
      <div class="form-phone">
        <input class="input-val" v-model="sms" placeholder="输入验证码" />
        <span @click="getSms">{{ timeout }}</span>
      </div>
      <!-- <div class="read">
        <span class="circle"><span class="circle-content"></span></span>我已阅读并同意《用户服务协议及隐私政策》
      </div> -->
      <div class="button" @click="login">立即登陆</div>
    </div>
  </div>
</template>

<script setup>
import { userSms, userLogin } from '../../api/apiList/login.js'
import { Notify } from 'vant';
import 'vant/es/notify/style';
import goBack from '../../components/goBack.vue';
import loginLogin from '../../assets/images/login-logo.png';
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const path = route.query.path;
const phone = ref('');
const sms = ref('');
const router = useRouter();


const timeout = ref('获取验证码');
const getSms = () => {
  if (!phone.value) {
    Notify({ type: 'warning', message: '请输入手机号' });
    return
  }
  if (timeout.value == '获取验证码') {
    userSms({ phone: phone.value }).then((res) => {
      if (res.code == 200) {
        timeout.value = 60
        Notify({ type: 'success', message: res.message });
        let timeoutFunc = setInterval(() => {
          timeout.value = timeout.value - 1
          if (timeout.value == 0) {
            timeout.value = '获取验证码'
            clearInterval(timeoutFunc)
          }
        }, 1000)
      }
      if (res.code == 400) {
         Notify({ type: 'danger', message: res.message });
        // ElMessage.error(res.message)
      }

    })
  }

}

const login = () => {
  if (!!phone.value && !!sms.value) {
    userLogin({ phone: phone.value, code: sms.value }).then((res) => {
      if (res.code == 200) {
         Notify({ type: 'success', message: res.message });
        // 登陆成功
        sessionStorage.setItem("PHONE-TOKEN", res.result.token);
        // 跳转
        if (path) {
          router.push({ path });
        } else {
          router.push({ path: '/index' });
        }
      }
    })
  } else {
     Notify({ type: 'warning', message: '请输入手机号或验证码' });
  }
}
</script>

<style lang="less" scoped>
.login {
  padding: 0 24px;
  background-image: url('../../assets/images/login-bg.png');
  background-size: contain;
  background-position: -20px -25px;
  background-repeat: no-repeat;

  .login-logo {
    width: 60px;
    height: 43px;
    padding-top: 139px;
    margin-bottom: 20px;
  }

  .title {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 33px;

    margin-bottom: 12px;
  }

  .subtitle {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
    margin-bottom: 78px;
  }

  .form {
    input {
      outline: none;
    }

    .form-phone {
      padding: 0 24px;
      border-bottom: 1px solid rgba(151, 151, 151, 0.2);
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 25px;
      height: 50px;
      margin-bottom: 14px;
      position: relative;

      .input-val {
        border: none;
        height: 90%;
        width: 200px;
      }

      span {
        position: absolute;
        right: 20px;
        font-size: 18px;
        top: 30%;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #738bff;
        line-height: 25px;
      }
    }

    .read {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      margin-top: 32px;
      justify-content: center;

      .circle {
        width: 15px;
        height: 15px;
        border: 1px solid #979797;
        border-radius: 15px;
        margin-right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;

        .circle-content {
          display: block;
          width: 7px;
          height: 7px;
          background: #9B9B9B;
          border-radius: 7px;
        }
      }
    }

    .button {
      width: 299px;
      height: 51px;
      background: linear-gradient(270deg, #95bbf9 0%, #a0aefe 100%);
      border-radius: 26px;
      margin: 0 auto;
      margin-top: 78px;
      font-size: 21px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 51px;
      text-align: center;
    }
  }

}
</style>
